<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="ol3/ol.css" type="text/css">
    <style>
        #map {
            background-color: gray;
            height: 256px;
            width: 512px;
        }
    </style>
    <title>OpenLayers 3 example</title>
    <script src="ol3/ol.js" type="text/javascript"></script>
</head>
<body>
<h1>My Map</h1>
<div id="map"></div>
<script type="text/javascript">
    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Vector({
                title: 'Buildings',
                source: new ol.source.Vector({
                    url: 'data/layers/buildings.kml',
                    format:ol.format.KML({
                        extractStyles: false
                    })
                }),
                style: new ol.style.Style({
                    stroke: new ol.style.Stroke({color: 'red', width: 2})
                })
            })
        ],
        view: new ol.View({
            projection: 'EPSG:4326',
            center: [-122.791859392, 42.3099154789],
            zoom: 16
        })
    });
</script>
</body>
</html>
